<!--  -->
<template>
<div class='liveRoombox'>
    <header>
        <span>王一博直播间</span><span>春季美妆搭配</span><span></span>
    </header>
    <main>
        <div class="left">
            <dl>
                <dt><i class="el-icon-view"></i></dt>
                <dd>
                   观看人数：7,732人
                </dd>
            </dl>
            <dl>
                <dt><i class="el-icon-user"></i></dt>
                <dd>
                  最高在线人数：7,732人
                </dd>
            </dl>
            <dl>
                <dt><i class="el-icon-office-building"></i></dt>
                <dd>
                    新增粉丝数：7,732人
                </dd>
            </dl>
            <dl>
                <dt><i class="el-icon-school"></i></dt>
                <dd>
                   购买人数：7,732人
                </dd>
            </dl>
        </div>
        <div class="middle">
            <img class="img" src="../../../../../assets/img/wyb.jpeg" alt="">
            <div class="btn">
                <span></span>
                <span @click="$router.push('/liveAList')">返回</span>
                <span>强制关闭</span>
                <span></span>
            </div>
        </div>
        <div class="right">

        </div>
    </main>
</div>
</template>

<script>

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

}
}
</script>
<style lang='scss' scoped>
.liveRoombox{
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   header{
       height: 60px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: rgb(56, 55, 55);
       color:#fff;
       padding: 0 15px;
   }
   main{
       flex: 1;
       background: #000;
       display: flex;
        .left{
            width: 25%;
            display: flex;
            flex-direction: column;
            padding: 4% 5%;
            dl{
                width: 100%;
                display: flex;
                height: 50px;
                align-items: center;
                dt{
                    i{
                        color:rgb(36, 140, 182)
                    }
                }
                dd{
                        color:rgb(36, 140, 182)
                }
                
            }
        }
        .middle{
            width: 50%;
            display: flex;
            flex-direction: column;
            padding:4% 5%;
            img{
                width: 700px;
                height: 600px;
            }
            .btn{
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding-top: 20px;
                span:nth-child(2){
                    background: orangered;
                    width: 160px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    color: #fff;
                }
                span:nth-child(3){
                    border: 1px solid orangered;
                    width: 140px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    color: #fff;
                }

            }
        }
        .right{
            width: 25%;  
        }
   }

}
</style>